/*
 * @Description: 
 * @Author: fhw
 * @Date: 2023-02-23 15:46:26
 */
import { errorTips, successTips } from '@/utils'
import {  defineComponent, PropType, reactive, ref, watch } from 'vue'
interface FormData {
    /** 登录密码 */
    old_password?: string
    /** 新密码 */
    new_password?: string
}
const props = {
    visible: {
        type: Boolean as PropType<boolean>,
        required: true
    },
    userId: {
        type: Number as PropType<number>,
    },
} as const
export default defineComponent({
    props,
    name: 'EditPassword',
    emits: ['cancel', 'search'],
    setup(props, { emit }) {
        const rules = {
            old_password: [{ required: true, message: '请输入旧密码', trigger: 'change' }],
            new_password: [{ required: true, message: '请输入新密码', trigger: 'change' }],
        }
        const pageState = reactive({
            loading: false,
            formData: {} as FormData
        })
        function cancel() {
            pageState.formData = {}
            pageState.loading = false
            emit('cancel')
        }
        async function submit() {
            pageState.loading = true
            const { success, msg } = await API.server.adminUser.updatePassWord.request({
                userId: props.userId as number,
                old_password: pageState.formData.old_password as string,
                new_password: pageState.formData.new_password as string,
            })
            pageState.loading = false
            if (success) {
                successTips('密码修改成功')
                cancel()
                emit('search')
                return
            }
            errorTips(msg)
        }
        return () => (
            <div>
                <a-modal
                    title='修改密码'
                    visible={props.visible}
                    onCancel={cancel}
                    footer={null}
                    centered
                    confirmLoading={pageState.loading}
                >
                    <a-form
                        class="ant-advanced-search-form"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 14 }}
                        model={pageState.formData}
                        rules={rules}
                        onFinish={submit}
                    >
                        <a-row>
                            <a-col span={24}>
                                <a-form-item name="old_password" label="旧密码">
                                    <a-input v-model={[pageState.formData.old_password, 'value']} />
                                </a-form-item>
                                <a-form-item name="new_password" label="新密码">
                                    <a-input v-model={[pageState.formData.new_password, 'value']} />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <div style={{ textAlign: 'center' }}>
                            <a-button type="primary" loading={pageState.loading} html-type="submit">
                                提交
                            </a-button>
                            <a-button onClick={cancel}>取消</a-button>
                        </div>
                    </a-form>
                </a-modal>
            </div>
        )
    }
})